<template>
  <div>
    <div class="zyclass">
      <section>
        <h3>中怡互联网医院</h3>
        <h5>医生端</h5>
      </section>
      <br><br>
      <section>
        <h5>请患者扫描条形码</h5>
        <div class="barcode-color-box">
          <p>
            <barcode :value="barcode_value" :options="barcode_option" tag="svg"></barcode>
          </p>
        </div>
        <h6>每分钟自动更新(V1.0.0)</h6>
      </section>
      <br><br>
      <section>
        <button class="buttonSM" @click="saomiao">
          扫描患者条形码
        </button>
        <br>
        <h6>扫描患者条形码，立即建立长久联系</h6>
      </section>
    </div>
  </div>
</template>
<script>
import barcode from '@xkeshi/vue-barcode';

export default {
  data () {
    return {
      barcode_value: this.$root.doctorInfo.doctorBarcode,
      barcode_option: {
        displayValue: true,
        background: '#fff',
        valid: function(valid){
          console.log(valid);
        },
        width: '1px',
        height: '45px',
        fontSize:　'10px'
      }
    }
  },
  components: {
    barcode,
  },
  methods: {
    saomiao(){
      alert('调取摄像头...');
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f3f3f3;
}
h3,
h5,
h6 {
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  color: #333;
  font-weight: normal;
  font-family: "Microsoft Yahei";
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.zyclass {
  text-align: center;
  width: 100%;
  background-color: #fff;
  height: 381px;
}
.barcode-color-box {
  display: inline-block;
  border-radius: 4px;
  padding: 10px;
  /*margin: 5px 0; */
  height: 94px;
  box-sizing: border-box;
  background-color: #f3f3f3;
  width: 80%;
}
.buttonSM {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #7078ec;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
</style>
